<template>
    <div class="instanceContainer">
        <div class="searchContainer">
            <ContainerInstanceDetailSearch />
        </div>
        <div>
            <el-table
                :data="containerInstanceDetailDataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                class="tableContainer"
                max-height="70vh"
            >
                <el-table-column prop="dockerName" label="容器名称" />
                <el-table-column prop="dockerContainerId" label="容器ID" />
                <el-table-column prop="containerInfoDTO.status" label="实例状态" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.containerInfoDTO.status === 'running'" effect="dark" type="success">运行中</el-tag>
                        <el-tag v-else-if="scope.row.containerInfoDTO.status === 'restarting'" effect="dark" type="warning">重启中</el-tag>
                        <el-tag v-else-if="scope.row.containerInfoDTO.status === 'exited'" effect="dark" type="danger">已停止</el-tag>
                        <el-tag v-else-if="scope.row.containerInfoDTO.status === 'created'" effect="dark" type="info">已创建</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="containerInfoDTO.startedAt" label="实例启动时间" align="center"/>
                <el-table-column prop="containerInfoDTO.finishedAt" label="容器最后一次停止时间" align="center"/>
                <el-table-column prop="containerInfoDTO.restartCount" label="容器重启次数" align="center"/>
            </el-table>
        </div>
    </div>
</template>

<script>
import {containerInstanceDetailInfo} from "@/request/container";
import {createTag} from "@/utils/tagCreate";
import ContainerInstanceDetailSearch from "@/components/containerManage/ContainerInstanceDetailSearch";

export default {
    name: "ContainerInstanceDetail",
    computed: {
        containerInstanceDetailSearchData() {
            return this.$store.state.containerInstanceDetailSearchData;
        },
        containerInstanceDetailDataList() {
            return this.$store.state.containerInstanceDetailDataList;
        }
    },
    created() {
        containerInstanceDetailInfo(this.containerInstanceDetailSearchData).then(res => {
            this.$store.state.containerInstanceDetailDataList = res.data;
        })
    },
    components: {
        ContainerInstanceDetailSearch
    },
    mounted() {
        createTag(this.$route, this.$store)
    }
}
</script>

<style scoped lang="less">
.instanceContainer {
    width: 98%;
    height: 100%;
    margin: 0.2%;
    .searchContainer {
        width: 100%;
        margin-top: 1%;
    }
    .tableContainer {
        margin-left: 1%;
    }
}
</style>